<template>
  <div class="parent">
    <div class="content">
      <div>父亲</div>
      <div @click="money++">money:{{ money }}</div>
      <div>儿子的女朋友:{{ sonMsg }}</div>
    </div>

    <!-- 父通信子：在子组件身上绑定一个自定义属性 -->
    <!-- 子通信父：在子组件身上绑定一个自定义的事件 -->
    <sonCom :SonMoney="money" title="你好" @getSonMsg="hander" />
  </div>
</template>
  
<script setup>
import sonCom from "./sonCom.vue";
import { ref } from "vue";
const money = ref(100);
const sonMsg = ref("");

// 通过data接收子的消息
const hander = (data) => {
  console.log("父接收到了子的消息:", data);
  sonMsg.value = data;
};
</script>
  
  <style  scoped>
.parent {
  width: 550px;
  height: 300px;
  border: 2px solid #0dff00;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  display: flex;
  flex-direction: column;
}
</style>